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By Linda Amundson 


Five Steps to an Accessible 
Classroom Website 



I f you were to evaluate your class- 
room website right now, would you 
be able to navigate it using text-to- 
speech software with your eyes closed? 
Would you be able to gather all of the 
information the website provides with 
the sound turned off? What if you 
viewed the website through a browser 
with images turned off? What if you 
could not use a mouse? 

When teachers or technology co- 
ordinators publish a website, they are 
providing a product for a diverse group 
of people. That s why website design 


should follow accessibility guidelines. 
Websites should be accessible to those 
with visual, hearing, movement, cog- 
nitive, and speech disabilities. People 
may be using a variety of tools to ex- 
perience and navigate your website, 
including voice output, Braille displays, 
keyboards instead of mice, and screen 
magnifiers. The effective use of these 
tools becomes possible only when a 
website is truly accessible. 

In addition, when you follow acces- 
sibility guidelines, your website be- 
comes navigable for those with 


slow Internet connections and people 
who have limited experience with the 
language you speak. 

Good design means greater acces- 
sibility for all. Follow these five steps, 
and you will open your website to a 
wide community of diverse users. 

Step 1 : Organize for Easier Navigation 

Make sure you use headers to struc- 
ture your webpage. Headers identify 
new sections to the reader, whether 
visitors are skimming a website for 
information or using a screen reader. 
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WHAT MAKES THIS WEBSITE ACCESSIBLE? 
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The World Wide Web Consortium website 
listed in this article: 


MgiTbi&T Home 


(www.w3.org) follows all of the criteria 


Uses headers 

Doesn’t require horizontal scrolling 

Uses appropriate color scheme for 
the background 

Can be viewed easily in gray scale 

Can be navigated with the Tab key; 
does not have dropdown menus 

Provides descriptive text for links 


Uses the access key tag to assign 
letters to main links 

Provides a description of the image 
at the top using the alt tag 

Uses alt tags of appropriate length 

Provides title tags on main links to 
give users descriptions 

Provides a link to contact the 
webpage developer 


Think of using headers as similar to 
creating an outline. Headers provide 
a hierarchy for your text and organize 
information into groups. 

Graphic elements, such as horizon- 
tal lines, are not always clear signals 
for new sections, especially to some- 
one who cannot see the screen. Go 
ahead and use horizontal lines and 
other graphical elements, but be sure 
to incorporate headers as well. 

Use similar organization on all of 
the pages within your website to al- 
low the user to become comfortable 
with the format you have chosen and 
to make navigating other pages easier. 
Also, do not create webpages that are 
too large for the screen and require 
horizontal scrolling. Keep in mind 
that your audience may use a variety 
of screen resolutions. Use relative siz- 
ing in percent format rather than a 
fixed pixel amount to allow visitors 
to view your website using browser 
windows of various sizes. 

Finally, when organizing informa- 
tion on your website, think about the 
colors you are using for fonts and 
backgrounds. Avoid red and green, 
as these colors are indistinguishable 
to those with color blindness. Also, 
consider the contrast of the colors. 
Never use colors on the same page 
that are difficult to distinguish in 
gray scale. 

Step 2: Navigation without a Mouse 

Set up your website so that users can 
navigate easily through the informa- 
tion with the Tab key. This will be 
beneficial to a variety of people, in- 
cluding those with vision impairments 
or even someone with a temporary 
disability such as a broken arm. 


Keep in mind that tools such as roll- 
overs and dropdown menus are dif- 
ficult to use without a mouse. Because 
these features use Java script, most 


screen readers cannot interpret the 
information. Cascading style sheets 
(CSS) can improve the usability of the 
Java script, but incorporating them 
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into a website can be a complicated 
process for the Web developer. 

One way to make links accessible to 
those without a mouse is to include 
the access key attribute in the link 
code. Access keys allow the developer 
to choose a letter key to press to go to 
a specific linked page. Each link can 
be coded with a different access key 
to allow the user to follow a variety 
of links without tabbing through 
each one each time. It is also helpful 
to group related links together. 

Step 3; Text Explanations for Images 

Provide text for every item in your web- 
site that is not in text format, such as 
images, audio, animation, buttons, Java 
applets, and image maps. Think about 
how you would describe them over the 
telephone. Provide enough information 
so that the user isn t left questioning 
what they are missing, but bear in mind 
that too much information can make 
viewing and navigating the website a 
daunting task. Screen readers cannot 
make sense of images and Java script, 
so be sure to provide explanations in 
text. Otherwise, users who cannot view 
the screen will skip nontext items. 

One way to provide text information 
is to use the “alt” tag or “longdesc” tag 
within the image, animation, or applet 
HTML code. Some Web editors, such 
as PageSpinner for Mac, will ask for 
this information when inserting a new 
image. Use the alt tag for a very brief 
description of the item so the informa- 
tion is available when the image can- 
not be viewed. If you require a longer 
description, use the longdesc tag to 
provide a link to an additional file with 


more information about the item. This 
is especially useful when describing a 
graph, chart, or detailed image. 

Sound and video need text too. Al- 
ways include captions in video, and 
provide transcripts of audio and video 
so the user can gather all of the neces- 
sary information. 

Finally, if all of the additional text 
gets to be too much for one page, 
provide an additional page that is 
text only. Make sure to create a link 
between the two pages so the user 
can get back to the original page. 

Step 4: Using Text that Makes Sense 

When creating links, use text that ac- 
tually describes what the link is about. 
Avoid phrases such as “click here,” 
which doesn’t tell users what infor- 
mation they will gather by clicking 
on a link and doesn’t apply to those 
who aren’t using a mouse. One way to 
include more information about the 
link is to use the “title” attribute. You 
can give the link a title within the link 
code and describe what the link does. 
Also, if the same link text is used mul- 
tiple times on the same page, it should 
link to the same page each time. 

Step 5: Web Validators 

Web validators evaluate your website 
according to various categories of ac- 
cessibility. After evaluating your web- 
site, a validator generates a report that 
lists any accessibility problems. Each 
Web validator assesses the website ac- 
cording to slightly different criteria, 
so you or your Web developer may 
consider using more than one. (See 
Web Validation Tools.) 
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Final Check 

After planning your website using these 
five steps, it s time for a final check. 

• Try using your website without a 
mouse. Can you navigate it now? 

• Turn the sound off on your com- 
puter, change the settings in your 
Internet browser to turn off images, 
and resize the window. 

• Check the website using a gray-scale 
color scheme. 

If you can still gather all of the 
intended information, you have ac- 
complished your goal of making the 


website more accessible. Another way 
to check website accessibility is to ask 
an individual with a disability to test 
your website to provide additional 
feedback. Also, be sure to include an 
e-mail address on your webpage. 

It takes considerable thought to 
ensure that a webpage is accessible to 
a wide audience. Teachers as Web de- 
velopers need to consider the purpose 
of their webpages, which is to provide 
information to the intended audience. 
By keeping these five steps in mind, 
your website will become much more 
effective and useful. 


Resources 

“Introduction to Web Accessibility” by 
WebAIM: http://webaim.org/intro 
“Introduction to Web Accessibility” (2005) by 
World Wide Web Consortium: www.w3.org/ 
WAI/ intro/ accessibility.php 
PageSpinner: www.optima-system.com/page 
spinner 

“Quick Tips to Make Accessible Web Sites” 
(1999) by the Education and Outreach Work- 
ing Group: www.w3.org/WAI/quicktips 

Linda Amundson is an eighth 
grade teacher at Karcher Middle 
School in Burlington, Wisconsin. 
She recently completed a mas- 
ters degree in technology in 
education at Lesley University 







Chart the Future 

and Challenge Convention 

Convenience and Choice in New 

Master of Science in Instructional Technology 

■ 36-credit fully online course 

■ Degree for New York state certified educations 
leads to certification as a K-12 Educational 
Technology Specialist 

■ Graduates of the program can apply for NY 
professional certification in initial certification area 

■ Make global connections with other educators 

■ Teach with innovative technology 


For admissions or information, call 888.780.4063 
or visit www.nyit.edu/education 

Register Now new york institute 

OF Technology 


Copyright © 2009, ISTE (International Society for Technology in Education), 1 .800.336.5191 (U.S. & Canada) or 1 .541 .302.3777 (Int’l), iste@iste.org, www.iste.org.AII rights reserved. 

November 2009 I Learning & Leading with Technology 19 




